// @import c-hider
@import large-play-button
@import buttons
@import code_snippet
@import masthead
@import misc
@import position
@import status_label
@import video_container
@import wrap

// Maintain aspect ratio
=aspect-ratio($width, $height, $className)
    position: relative
    &:before
        display: block
        content: ""
        width: 100%
        padding-top: ($height / $width) * 100%
    &_#{$className}
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0

// Used on the "Navigation Bar Tray", etc.
=animate-zoom-out($adjuster-class, $speed: 0.1s)
    filter: blur(5px)
    opacity: 0
    pointer-events: none
    transform: scale(1.05) translate3d(0, 0, 0)
    transition: all $speed ease-in-out
    visibility: hidden
    will-change: transform opacity

    #{$adjuster-class}
        filter: blur(0)
        opacity: 1
        pointer-events: inherit
        transform: scale(1) translate3d(0, 0, 0)
        visibility: visible

// Used on the audio player, etc.
=animate-up($adjuster-class, $delay: 0s)
    filter: blur(5px)
    opacity: 0
    pointer-events: none
    transition: all 0.1s ease-in-out $delay
    transform: translateY(100%) scale(1.0001) translate3d(0, 0, 0)
    visibility: hidden
    will-change: transform opacity

    #{$adjuster-class}
        filter: blur(0)
        opacity: 1
        pointer-events: inherit
        transform: translateY(0) scale(1) translate3d(0, 0, 0)
        visibility: visible

// Placeholder prefixing
=placeholder
    $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"

    @each $placeholder in $placeholders
        &:#{$placeholder}-placeholder
            @content
